<template>
  <a-modal
    :open="open"
    width="1100px"
    title="处置套餐"
    centered
    destroy-on-close
    :ok-button-props="{ disabled: !selectedRowKeys.length }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="flex justify-between">
      <a-input v-model:value="searchkey" class="w-60" placeholder="套餐名称/助记码" allow-clear />
      <a-space>
        <a-button type="default" @click="onReset">重置</a-button>
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </a-space>
    </div>
    <div class="flex justify-between h-[440px] mt-2">
      <div class="w-60 bg-thin h-full flex flex-col items-center">
        <a-tabs v-model:active-key="suitType" centered>
          <a-tab-pane :key="1" tab="科室" />
          <a-tab-pane :key="0" tab="个人" />
          <a-tab-pane :key="2" tab="全院" />
          <a-tab-pane key="" tab="全部" />
        </a-tabs>
        <SuitList ref="suitListRef" preview :suit-type="suitType" :search-key="searchkey" :template-type="0" @select="onSelectSuit" />
      </div>
      <div class="ml-4 flex-auto min-w-0">
        <BaseTable
          :loading="loading"
          :height="390"
          row-key="id"
          :data-source="dataSource"
          column-code="000121"
          :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'mc'"> <MedicineInfo :value="{ mc: record.mc, gg: record.sfxm?.gg }" /> </template>
            <template v-if="column.dataIndex === 'sl'"> {{ record.sl }}{{ record.sfxm.dw }} </template>
          </template>
        </BaseTable>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import SuitList from '@/views/army/components/SuitList'
import BaseTable from '@/components/BaseTable'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  }
})
const searchkey = ref('')
const suitListRef = ref()
const suitType = ref(1)
const selectedRowKeys = ref([])
const selectedRows = ref([])
const selectedSuit = ref(null)
const params = computed(() => {
  return {
    tcid: selectedSuit.value?.tcid,
    zjm: searchkey.value
  }
})
const { loading, dataSource, getData } = useFetch({
  url: '/outp/template/getClinicalOrderPackageItemList',
  params,
  onSuccess: (data) => {
    selectedRowKeys.value = data.map((item) => item.id)
    selectedRows.value = data
  }
})

const onCancel = () => {
  suitType.value = 1
  searchkey.value = ''
  selectedRowKeys.value = []
  selectedRows.value = []
  emit('update:open', false)
}
const onSelectSuit = (select) => {
  selectedSuit.value = select
  getData()
}
watch(
  () => props.open,
  (val) => {
    !val && onCancel()
  }
)
const onSearch = () => {
  suitListRef.value.getData()
}
const onSelectChange = (keys, rows) => {
  selectedRowKeys.value = keys
  selectedRows.value = rows
}
const onReset = () => {
  suitType.value = 1
  searchkey.value = ''
  nextTick(() => suitListRef.value.getData())
}
const onOk = async () => {
  const list = selectedRows.value.map((item, index) => ({
    ...item,
    tcBzdj: selectedSuit.value?.tcPrice,
    orderType: item.enablePackagePricing ? 2 : 1,
    isSuit: true,
    key: `row-${Math.random().toString().slice(2)}`,
    id: null,
    isNew: true,
    cfbh: 1,
    isselectAllTc: selectedRows.value.length === dataSource.value.length ? 1 : 0,
    isLast: index === selectedRows.value.length - 1
  }))
  list.length > 0 ? emit('success', list) : onCancel()
}
</script>
